<template>
	<view class="uni_box home">
		<navbar title="视频列表" :yin="true"> </navbar>
		<view class="content">
			<!-- <image class="quan" src="@/pages_subject/static/img/quanjia.png" mode="" /> -->
			<view class="list" v-for="(item, index) in list" :key="index">
				<view class="onelist">
					<text class="onetit">{{ index + 1 }}.{{ item.name }}</text>
					<image class="xiavideo" src="@/pages_subject/static/img/xiavideo.png" mode="" />
				</view>
				<view class="twolist" v-for="(child, childIdx) in item.list" :key="child.id">
					<view class="items" @click="
              () => {
                openVideoList(child, childIdx);
              }
            ">
						<text class="twotit">（{{ childIdx + 1 }}）{{ child.name }}</text>
						<image class="vfan ml" src="@/pages_subject/static/img/vfan.png" mode="" />
					</view>
					<view class="video-list-wrap" :style="{
              height:
                currentShowVideo === child.id
                  ? `${60 * videoList.length}rpx`
                  : 0,
            }">
						<view class="items" v-for="video in videoList" :key="video.id"
							@click="getvideo(child.id, video.id, child.name)">
							<image class="vbo" src="@/pages_subject/static/img/vbo.png" mode="" />
							<text class="threetit">
								{{ video.title }}
							</text>
							<view class="gaun ml">{{ video.button_text }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				currentShowVideo: -1,
				videoList: [],
				combo_id:''
			};
		},
		onLoad(option) {
			if(option.combo_id){
				this.combo_id = option.combo_id
			}
		},
		onShow() {
			// 请求视频列表
			this.getCourseChapterList();
			// this.getCourseVideoList();
		},
		methods: {
			//视频目录获取
			async getCourseChapterList() {
				const res = await this.$u.api.courseChapterListGet({
					id:this.combo_id
				});
				this.list = res;
			},
			// 获取视频列表
			async getCourseVideoList(id) {
				const res = await this.$u.api.courseVideoListGet({
					id
				});
				console.log(res);
				this.videoList = res;
			},

			openVideoList(e) {
				this.videoList = [];
				if (e.id === this.currentShowVideo) {
					this.currentShowVideo = -1;
				} else {
					this.currentShowVideo = e.id;
					this.getCourseVideoList(e.id);
				}
			},
			// 跳转视频详情
			getvideo(chapterId, videoId, chapterName) {
				// #ifdef H5
				this.navrouter(
					`/pages_subject/twoPage/ZhikePage/VideoDetail?chapterId=${chapterId}&videoId=${videoId}&chapterName=${chapterName}`
				);
				// #endif
				// #ifdef APP
				this.navrouter(
					`/pages_subject/twoPage/ZhikePage/VideoDetailApp`
				);
				// #endif
			},
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.content {
		background-color: #fff;
		// padding-bottom: 150rpx;
		padding: 30rpx;

		.list {
			margin-bottom: 30rpx;
		}

		.onelist {
			display: flex;
			flex-direction: row;
			align-items: center;

			.onetit {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 36rpx;
				color: #111111;
			}

			.xiavideo {
				margin-left: auto;
				width: 24rpx;
				height: 14rpx;
			}
		}

		.twolist {
			display: flex;
			flex-direction: column;
			// align-items: center;
			padding-left: 20rpx;

			.items {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 30rpx;
			}

			.twotit {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #060606;
			}

			.vfan {
				width: 8rpx;
				height: 15rpx;
			}

			.vbo {
				width: 19rpx;
				height: 19rpx;
				margin-right: 7rpx;
				margin-left: 34rpx;
			}

			.threetit {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 18rpx;
				color: #999999;
			}

			.gaun {
				width: 75rpx;
				height: 30rpx;
				background: linear-gradient(-90deg, #fa4e4e, #fd894f);
				border-radius: 15rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #ffffff;
			}
		}

		.navlist {}
	}

	.ml {
		margin-left: auto;
	}

	.video-list-wrap {
		overflow: hidden;
		transition: height 0.3s linear;
	}
</style>